import React, { useState, useEffect } from 'react';

import { useNavigate } from 'react-router-dom';
import DefaultMenuData from "../../mock/data/MenuData"; // 导入 useNavigate
import DefaultUserData from "../../mock/data/UserData";
import UserTable from "./UserTable"; // 导入 useNavigate

function UserPage () {
    // 从 localStorage 初始化菜单数据
    const [menuData, setMenuData] = useState(() => {
        const storedMenuData = localStorage.getItem('menuData');
        return storedMenuData ? JSON.parse(storedMenuData) : DefaultMenuData;
    });
    // 从 localStorage 角色数据
    const [userData, setUserData] = useState(() => {
        const storedUserData = localStorage.getItem('userData');
        return storedUserData ? JSON.parse(storedUserData) : DefaultUserData;
    });

    const navigate = useNavigate(); // 使用 useNavigate 创建导航函数

// 监控 menuData 的变化，并同步到 localStorage
    useEffect(() => {
        localStorage.setItem('menuData', JSON.stringify(menuData));
    }, [menuData]);

// 监控 userData 的变化，并同步到 localStorage
    useEffect(() => {
        localStorage.setItem('userData', JSON.stringify(userData));
    }, [userData]);


    return (
        <div className="container">
                <div className="content">
                    <UserTable userData={userData} setUserData={setUserData} />
                </div>

        </div>
    );
}

export default UserPage;
